import React, { useState, useEffect } from 'react'
import { ActivityIndicator,PullToRefresh } from 'antd-mobile'
import { history } from 'umi'
import {MyNavBar} from '@/components'

import './index.less'
import {_getHouseLike} from './store'

export default function (props) {
  const [ data, setData ] = useState([])

  const [ loading, setLoading ] = useState(false)

  const getHouseLike = async () => {
    setLoading(true)
    const result = await _getHouseLike()
    setData(result)
    setLoading(false)
  }

  useEffect(()=>{
    getHouseLike()
  },[])

  return (
    <div>
      <MyNavBar title='猜你喜欢' />
      <div className='search-page'>
        <PullToRefresh
          direction='down'
          onRefresh={()=>{
            getHouseLike()
          }}
        >
        {loading
          ? <ActivityIndicator toast />
          : <div className='result'>
            {data.map(item => (
              <div className='item' key={item.id} onClick={()=>{
                history.push({
                  pathname:'/house/house',
                  query:{
                    id:item.id
                  }
                })
              }}>
                <img src={item?.pictures ? item?.pictures.split('|')[0] : require('@/assets/blank.png')}/>
                <div className='item-right'>
                  <div className='title'>{item.name}</div>
                  <div className='price'>{item.rent}元/天</div>
                </div>
              </div>
            ))}
          </div>
        }
        </PullToRefresh>
      </div>
    </div>
  )
}
